<template>
  <div>
    <div id="myChart1" style="width:750px; height:400px" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
export default {
  data() {
    return {

    }
  },
  mounted() {
    var myChart = echarts.init(document.getElementById('myChart1'))
    myChart.setOption(
      {
        // backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
        //   offset: 0,
        //   color: '#FFEBCD'
        // },
        // {
        //   offset: 0.8,
        //   color: '#fff'
        // }
        // ], false),
        grid: {
          top: '20%',
          left: '10%',
          right: '10%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['14', '15', '16', '17', '18', '19'],
          axisLabel: {
            margin: 30,
            color: 'balck'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: true,
            length: 25,
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        yAxis: [{
          type: 'value',
          position: 'right',
          axisLabel: {
            margin: 20,
            color: '#ccc'
          },

          axisTick: {
            show: true,
            length: 15,
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ccc'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ccc',
              width: 2
            }
          }
        }],
        series: [{
          type: 'line',
          smooth: true, // 是否平滑曲线显示
          showAllSymbol: true,
          symbol: 'circle',
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: '#ccc' // 线条颜色
            }
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#A52A2A'
            }
          },
          itemStyle: {
            color: 'red',
            borderColor: '#ccc',
            borderWidth: 3
          },
          tooltip: {
            show: false
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#FFD39B'
              },
              {
                offset: 1,
                color: '#EE7942'
              }
              ], false)
            }
          },
          data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200]
        }]
      })
  }
}
</script>

  <style scoped>
    #myChart1{
      height: 260px;
      width: 565px;
    }
  </style>

